<template>
    <view>
        <!-- #ifdef  MP-WEIXIN-->
        <picker mode="region" :value="region" @change="changeRegin">
            <view class="uni-input" v-if="region.length > 0">{{ region[0] }} - {{ region[1] }} - {{ region[2] }} </view>
            <view class="uni-input" v-else style="color: #ccc">请选择所在地区</view>
        </picker>
        <!-- #endif -->
        <!-- #ifndef  MP-WEIXIN-->
        <view class="uni-input" :style="regionName == '请选择所在地区' ? 'color: #ccc;' : ''" @click="areaSelectFn">{{
            regionName
        }}</view>
        <!-- #endif -->
        <uni-popup ref="areaSelect" type="bottom" background-color="#fff" :safe-area="false">
            <area-select :address-data="areadata" @pickArea="pickArea"></area-select>
        </uni-popup>
    </view>
</template>

<script>
import areaSelect from "@/uni-sub-base/components/area-select/area-select.vue"
export default {
    props: {
        data: {
            // 数据
            type: String,
        },
        index: {
            type: Number,
            default: 0,
        },
    },
    components: {
        areaSelect,
    },
    data() {
        return {
            region: [],
            regionName: "请选择所在地区",
            areadata: {
                AddressName: "",
                ContactName: "",
                ContactTel: "",
                ContactAddress: "",
                IsDefault: false,
                ProvinceId: 0,
                ProvinceName: "",
                CityId: 0,
                CityName: "",
                AreaId: 0,
                AreaName: "",
                StreetId: 0,
                StreetName: "",
                Longitude: "",
                Latitude: "",
                ZipCode: null,
            },
        }
    },
    mounted() {
        if (this.data) {
            this.region = this.data.split(",")
            this.regionName = this.data
        }
    },
    methods: {
        //选择地区
        areaSelectFn() {
            this.$refs.areaSelect.open()
        },
        //选择地区回调
        pickArea(data) {
            this.$refs.areaSelect.close()
            this.areadata = Object.assign(this.areadata, data)
            this.getRegionName()
        },
        getRegionName() {
            let line = "-"
            this.regionName = `${this.areadata.ProvinceName || ""}-${this.areadata.CityName || ""}${
                this.areadata.AreaName ? line + this.areadata.AreaName : ""
            }${this.areadata.StreetName ? line + this.areadata.StreetName : ""}`
            this.$emit("changeAppRegin", this.index, this.regionName)
        },
        changeRegin(e) {
            this.region = e.detail.value
            this.$emit("changeRegin", this.index, this.region)
        },
    },
}
</script>

<style lang="scss">
.checkmain {
    display: flex;
    flex-wrap: wrap;

    label {
        display: flex;
        width: 50%;

        view {
            white-space: nowrap;
        }
    }
}
</style>
